<template>
	<view class="nft_sell">
		<view v-if="status === 1" class="nft_opera">
			<view class="money">
				<view class="price">卖家未寄售</view>
				<view class="collection" @click="toCollection">查看同系列藏品 <uni-icons color="#1952F8" size="12" type="right" /></view>
			</view>
			<view class="opera" @click="doOpera">出价求购</view>
		</view>

		<view v-else-if="status === 2" class="nft_opera">
			<view class="money">
				<view class="price"><text class="unit">￥</text>36575</view>
				<view v-show="showCollection" class="collection" @click="toCollection"
					>查看同系列藏品 <uni-icons color="#1952F8" size="12" type="right"
				/></view>
			</view>
			<view class="opera" @click="doOpera">立即购买</view>
		</view>

		<view v-else-if="status === 3" class="nft_opera">
			<view class="money">
				<view class="price toSell">目前底价：<text class="unit">￥</text>36575</view>
				<view class="collection" @click="toCollection">查看同系列藏品 <uni-icons color="#1952F8" size="12" type="right" /></view>
			</view>
			<view class="opera toSell" @click="doOpera">去寄售</view>
		</view>

		<view v-else-if="status === 4" class="nft_opera">
			<view class="money">
				<view class="price"><text class="unit">求购中￥</text>36575</view>
				<view class="collection" @click="toCollection">查看同系列藏品 <uni-icons color="#1952F8" size="12" type="right" /></view>
			</view>
			<view class="opera" @click="doOpera">取消求购</view>
		</view>

		<view v-else-if="status === 5" class="nft_opera">
			<view class="money">
				<view class="price toSell">目前底价：<text class="unit">￥</text>36575</view>
				<view class="collection" @click="toCollection">查看同系列藏品 <uni-icons color="#1952F8" size="12" type="right" /></view>
			</view>
			<view class="opera toSell" @click="doOpera">取消寄售</view>
		</view>

		<view v-else-if="status === 6" class="nft_opera">
			<view class="money">
				<view class="price"><text class="unit">￥</text>36575</view>
				<view class="collection" @click="toCollection">查看同系列藏品 <uni-icons color="#1952F8" size="12" type="right" /></view>
			</view>
			<view class="opera lock">订单锁定中</view>
		</view>

		<view v-else-if="status === 7" class="nft_opera">
			<view class="money">
				<view class="price"><text class="unit">￥</text>36575</view>
				<view class="lose" @click="toCollection">元气不足 请获取！</view>
			</view>
			<view class="opera toSell" @click="doOpera">去获取</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			status: 7, // 0:出价求购 1:立即购买 2:去寄售 3:求购中 4:取消求购 5:取消寄售 6:锁定中 7:元气不足
			showCollection: false,
		};
	},

	methods: {
		toCollection() {
			uni.navigateTo({
				url: "/pages/market/nftCollection",
			});
		},
		doOpera() {
			uni.navigateTo({
				url: "/pages/market/transaction",
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.nft_sell {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;

	.nft_opera {
		width: 100%;
		height: 160rpx;
		padding: 28rpx 40rpx;

		display: flex;
		justify-content: flex-start;
		align-items: center;

		background-color: #2e2e2e;

		.money {
			font-weight: bold;

			.price {
				font-size: 48rpx;
				color: white;

				.unit {
					font-size: 28rpx;
				}

				&.toSell {
					font-size: 40rpx;

					.unit {
						font-size: 40rpx;
					}
				}
			}

			.lose {
				font-size: 24rpx;
				color: #ff5a5a;
			}

			.collection {
				font-size: 24rpx;
				color: #1952f8;
			}
		}

		.opera {
			width: 360rpx;
			height: 100rpx;
			line-height: 100rpx;

			margin-left: auto;

			font-size: 40rpx;
			text-align: center;
			font-weight: bold;
			background-color: #1952f8;
			border-radius: 30rpx;
			color: white;

			&.toSell {
				width: 260rpx;
			}

			&.lock {
				background-color: #cccccc;
				color: #999999;
				pointer-events: none;
			}
		}
	}
}
</style>
